<template>
  <a-modal
    v-model:visible="bindVisible"
    :title="form?.projectId ? $t('operation.edit') : $t('operation.insert')"
    :cancelText="$t('operation.cancel')"
    :okText="$t('operation.confirm')"
    @ok="confirm"
  >
    <a-form layout="vertical">
      <a-form-item :label="$t('projectInfoModal.projectName')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="form.projectName" allow-clear />
      </a-form-item>

      <a-form-item :label="$t('projectInfoModal.baseUri')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="form.baseUri" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { Project } from '@/store/project'
import { PropType } from 'vue'

const props = defineProps({
  form: { type: Object as PropType<Project>, default: () => ({}) },
  visible: { type: Boolean, default: false },
  projects: { type: Array as PropType<Project[]>, default: () => [] },
})
const emit = defineEmits(['update:visible', 'ok'])
const bindVisible = ref(false)
watchEffect(() => (bindVisible.value = props.visible))
watchEffect(() => emit('update:visible', bindVisible.value))

const pwdVisible = ref(false)

const confirm = async () => {
  const res = await request.post('/api/dynamic-mock/project/save', props.form)
  bindVisible.value = false
  emit('ok')
}

const filterOption = (text: string, option: any) => {
  return ~option.label.indexOf(text)
}
</script>
